// import React, { useEffect, useState } from 'react';
// import 'antd/dist/antd.less';
// import { Form, Input, Popover, Button, Space, InputNumber, Image } from 'jst-components';
// import Table from '@/components/Table';
// import type { ArtColumn, features } from 'jst-react-table';
// import type { GoodsItem, GoodsInfoProps } from './index.d';
// import { queryBasicItem } from '@/services/erpItem';
// import CommodityCodeModal from '@/components/CommodityCodeModal';
// import { querySku } from '@/services/workOrderField';
// import SoldModal from './components/SoldModal';
// import { transFormToDataSource, transFormToCostPrice, transFormToHandWorkData } from './helper';
// import GoodsInfoDetail from '@/modules/work-order/components/GoodsInfoDetail';
// import useCreateApiWithModel from '@/hooks/useCreateApiWithModel';
// import styles from './index.module.less';
// import ReactDOM from 'react-dom';

// const columns = [
//   {
//     name: '商品编码',
//     code: 'skuId',
//   },
//   {
//     name: '商品数量',
//     code: 'qty',
//     width: 100,
//     features: { EditableCell: NumberInput },
//   },
//   {
//     name: '商品价格',
//     code: 'price',
//     width: 100,
//     features: { EditableCell: NumberInput },
//   },
//   {
//     name: '商品金额',
//     code: 'priceCount',
//     width: 100,
//     features: { EditableCell: NumberInput },
//   },
//   {
//     name: '商品图片',
//     code: 'pic',
//     width: 100,
//     render: (_value: string) => {
//       return <Image src={_value} width={50} style={{ borderRadius: '4px' }} key={_value} />;
//     },
//   },
//   {
//     name: '商品名称',
//     code: 'name',
//     features: { EditableCell: MyInput },
//   },
//   { name: '款式编码', code: 'iid' },
//   {
//     name: '颜色及规格',
//     code: 'spec',
//     features: { EditableCell: MyInput },
//   },
//   { name: '商品简称', code: 'shortName' },
//   {
//     name: '商品SN码',
//     code: 'snCode',
//     width: 150,
//     render: (_value: string[]) => {
//       return _value && _value.join(',');
//     },
//   },
//   { name: '所属线上订单号', width: 150, code: 'soId' },
//   { name: '供应商', code: 'supplierName' },
//   { name: '成本价', width: 150, code: 'totalCostPrice' },
//   { name: '分类', code: 'category' },
//   { name: '平台商品id', code: 'platformItemId' },
// ] as ArtColumn[];

// function MyInput({ col, row, rowIndex, form }: features.EditableCellProps) {
//   const { code } = col;
//   console.log(rowIndex);
//   useEffect(() => {
//     // @ts-ignore
//     form.setFieldsValue({
//       // @ts-ignore
//       [code]: row[code],
//     });
//   }, [row]);

//   /** 利用 Form 来简化业务代码 */
//   return (
//     <Space direction={'vertical'} style={{ padding: 8 }}>
//       <Form.Item
//         style={{ margin: 0 }}
//         //@ts-ignore
//         initialValue={row[code]}
//         name={code}
//       >
//         <Input style={{ width: '80px' }} />
//       </Form.Item>
//     </Space>
//   );
// }

// function NumberInput({ col, row, rowIndex, form }: features.EditableCellProps) {
//   const { code } = col;
//   console.log(rowIndex);
//   const _props =
//     code === 'qty'
//       ? {
//           step: '0',
//         }
//       : {
//           min: 0,
//           step: '0.01',
//           precision: 2,
//         };

//   useEffect(() => {
//     // @ts-ignore
//     form.setFieldsValue({
//       // @ts-ignore
//       [code]: row[code],
//     });
//   }, [row]);

//   /** 利用 Form 来简化业务代码 */
//   return (
//     <Space direction={'vertical'} style={{ padding: 8 }}>
//       <Form.Item
//         style={{ margin: 0 }}
//         //@ts-ignore
//         initialValue={row[code]}
//         name={code}
//       >
//         <InputNumber {..._props} style={{ width: '80px' }} controls={false} />
//       </Form.Item>
//     </Space>
//   );
// }

// export default (props: GoodsInfoProps) => {
//   const { options, onChange, value = [], disabled, isShowAddButton = true } = props;
//   const [baseColumns, setBaseColumns] = useState<ArtColumn[]>([]);
//   const [dataSource, setDataSource] = useState<any[]>([]);
//   const [selectedKeys, setSelectedKeys] = useState<any[]>([]);
//   const [visible, setVisible] = useState(false);

//   const { createApi } = useCreateApiWithModel();

//   const multiSelect = {
//     value: selectedKeys,
//     onChange: (nextValue: string[]) => {
//       // setIsLoad(false);
//       setSelectedKeys(nextValue);
//       if (nextValue.length === 0) {
//         onChange([]);
//       }
//     },
//   };

//   useEffect(() => {
//     // 回显数据
//     if (value.length) {
//       const list = value.map((v: any) => {
//         return {
//           ...v,
//           price: +v.price,
//           shopId: Math.random().toString(36).substr(2),
//           costPrice: v.costPrice ? v.costPrice : v.totalCostPrice,
//           totalCostPrice: v.costPrice
//             ? parseFloat((v.costPrice * v.qty || 1).toFixed(4))
//             : v.totalCostPrice, // 计算成本价
//           priceCount: v.priceCount ? v.priceCount : 0, // 计算金额
//         };
//       });
//       ReactDOM.unstable_batchedUpdates(() => {
//         setDataSource(list);
//         setSelectedKeys(list.map((item: any) => item.shopId));
//       });
//     } else {
//       // setIsLoad(false);
//     }
//   }, [value]); // eslint-disable-line react-hooks/exhaustive-deps

//   const editable = {
//     trigger: 'always-show', // 开启常显
//     /** 当前编辑行的状态变更回调 */
//     onRowChange: ({
//       isTouched,
//       rowKey,
//       form,
//       changedValues,
//       allValues, // 编辑控件值
//       row, // 源数据
//       rowIndex,
//     }: features.EditableRowChangeProps) => {
//       console.log(dataSource, 'dataSourcedataSource');
//       console.log(
//         'Editable onRowChange',
//         form,
//         changedValues,
//         { isTouched, rowKey, rowIndex },
//         allValues,
//         row,
//       );
//     },
//   };

//   // 内部订单添加商品
//   const handleOpenSoldVisible = () => {
//     createApi(SoldModal, {
//       onSuccess: async (data: GoodsItem[]) => {
//         const skuIdList = data.map((item) => item.skuId);
//         let result: GoodsItem[] = [];
//         const isExist = options.some((item: string) =>
//           ['supplierName', 'totalCostPrice', 'platformItemId', 'category'].includes(item),
//         );

//         if (isExist && skuIdList.length > 0) {
//           // 获取成本价，有值计算真实成本价
//           const res = await queryBasicItem({
//             data: {
//               skuIds: [...new Set(skuIdList)] || [],
//             },
//           });
//           result = transFormToCostPrice(data, res.data);
//         }
//         const list = isExist ? result : data;
//         const selectKey = [...dataSource, ...list].map((v: GoodsItem) => v.shopId);
//         ReactDOM.unstable_batchedUpdates(() => {
//           // setIsLoad(true);
//           setSelectedKeys(selectKey);
//           setDataSource([...dataSource, ...list]);
//         });
//       },
//     });
//   };

//   const onSave = async (checkedKey: string[]) => {
//     if (!checkedKey.length) return false;
//     let list: GoodsItem[] = [];
//     const { data } = await querySku({
//       data: {
//         skuId: checkedKey.length === 1 ? '@@' + checkedKey.join(',') : checkedKey.join(','),
//       },
//       page: {
//         currentPage: 1,
//         pageSize: 50,
//       },
//     });

//     // 是否存在成本价字段
//     const isExist = options.some((item: string) =>
//       ['supplierName', 'totalCostPrice', 'platformItemId', 'category'].includes(item),
//     );
//     if (isExist) {
//       // 获取成本价，有值计算真实成本价
//       const res = await queryBasicItem({
//         data: {
//           skuIds: checkedKey || [],
//         },
//       });
//       list = transFormToHandWorkData(data, res.data);
//     } else {
//       list = transFormToDataSource(data);
//     }
//     const shopIdList = [...dataSource, ...list].map((item: GoodsItem) => item.shopId);
//     ReactDOM.unstable_batchedUpdates(() => {
//       setDataSource([...dataSource, ...list]);
//       setSelectedKeys(shopIdList);
//     });
//   };

//   // 匹配相应的表头
//   useEffect(() => {
//     const res = columns.filter((item) => {
//       return options && options.some((ele: string) => ele === item.code);
//     });
//     const list = res.sort((a: any, b: any) => {
//       return options.indexOf(a.code) - options.indexOf(b.code);
//     });
//     setBaseColumns(list);
//   }, [options, dataSource]); // eslint-disable-line react-hooks/exhaustive-deps

//   const Content = (
//     <div className="content-popover">
//       <div>
//         <Button style={{ width: '136px', height: '40px' }} onClick={() => handleOpenSoldVisible()}>
//           根据内部订单添加
//         </Button>
//       </div>
//       <div style={{ marginTop: '8px' }}>
//         <Button style={{ width: '136px', height: '40px' }} onClick={() => setVisible(true)}>
//           手动添加
//         </Button>
//       </div>
//     </div>
//   );

//   return (
//     <>
//       {!disabled ? (
//         <div>
//           {isShowAddButton && (
//             <Popover title="选择添加方式" zIndex={1000} content={Content} trigger="click">
//               <div className={styles['add-goods']}>+ 添加商品</div>
//             </Popover>
//           )}
//           <Table
//             primaryKey="shopId"
//             dataSource={dataSource}
//             style={{
//               '--row-height': '41px',
//               maxHeight: 280,
//               overflow: 'auto',
//               zIndex: 0,
//             }}
//             isStickyHeader={false}
//             columns={baseColumns}
//             features={{ multiSelect, editable }}
//           />
//           <CommodityCodeModal onCancel={setVisible} visible={visible} onSave={onSave} value={[]} />
//         </div>
//       ) : (
//         <GoodsInfoDetail value={value} options={options} />
//       )}
//     </>
//   );
// };
